<template>
    <div class="nav">
        <div class="left-box">
            <div class="mobile-tab-btn icon" style="--icon: url(/icon/three_line.svg)"></div>
            <div class="logo icon" style="--icon: url(/Logo-Web-1300-300.png)"></div>
            <div class="tab-list">
                <div class="tab-item" v-for="item in link_list" :key="item.id">
                    <Link1 :text="item.text" :icon="item.icon" :active_icon="item.active_icon" @click="item.click"></Link1>
                    <div class="under-line" :style="`height: ${ active_nav_item.id == item.id ? '0.2vw' : '0vw' }`"></div>
                </div>
            </div>
        </div>
        <div class="right-box">
            <div class="user-box" v-show="!is_login">
                <div class="btn login-btn" @click="routerTo('/login')">Sign In</div>
                <div class="btn register-btn" @click="routerTo('/register')">Sign Up</div>
            </div>
            <div class="userinfo-box" v-show="is_login">
                <div class="user-account">{{ userInfo.account }}</div>
                <div class="more">
                    <div class="list">
                        <div class="item">
                            <div class="icon" style="--icon: url(/icon/login/verify.svg)"></div>
                            <div class="text">Verify Your Account</div>
                        </div>
                        <div class="item" @click="logoutPage.open">
                            <div class="icon" style="--icon: url(/icon/login/log-out.svg)"></div>
                            <div class="text">Logout</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="language-box">
                <Link1 :text="language.name" icon="/language/international.svg" active_icon="/language/international-active.svg" icon_size="1.1vw" @click="openLanguageSelector"></Link1>
            </div>
            <!-- <div class="logout-box" v-show="is_login">
                <div class="btn logout-btn">Logout</div>
            </div> -->
            <div class="date-box">
                <div class="date">{{ d || 'StockPro' }}</div>
                <div class="market-status" :style="`color: ${ market_status.close ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">Market {{ market_status.close ? 'Open' : 'Closed' }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 框架
import { ref, onMounted } from 'vue';

// 组件
import Link1 from '@/components/common/link/Link1.vue';

// 业务逻辑
import { link_list, active_nav_item, get_active_nav_item } from '@/service/page.js';
import { openLanguageSelector, language } from '@/service/language';
import { is_login, logoutPage } from '@/service/auth.js';
import { userInfo, userService } from '@/service/user.js';
import { market_status } from '@/service/market.js';

// 工具函数
import { routerTo } from '@/utils/jump.js';

const d = ref('');

function updateDate() {
    setInterval(() => {
        getDate();
    }, 1000);
}

function getDate() {
    // // 0. 创建一个 Date 对象
    // const date = new Date();
    // // 1. 提取星期缩写（getDay() 返回 0-6，对应 WEEK_DAYS 索引）
    // const dayOfWeek = WEEK_DAYS[date.getDay()];
    // // 2. 提取月份缩写（getMonth() 返回 0-11，对应 MONTHS 索引）
    // const monthAbbr = MONTHS[date.getMonth()];
    // // 3. 提取日期（getDate() 返回当月第几天，如 31）
    // const dayOfMonth = date.getDate();
    // // 4. 组合成目标格式
    // d.value = `${dayOfWeek}, ${monthAbbr} ${dayOfMonth}`;

    // 创建一个 Date 对象
    const now = new Date();
    
    // 设置为美国东部时间（EST/EDT）
    // 使用 'America/New_York' 时区，它会自动处理夏令时和冬令时
    const options = {
        timeZone: 'America/New_York',
        weekday: 'short',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    };
    
    // 格式化时间为美国东部时间
    const formatter = new Intl.DateTimeFormat('en-US', options);
    const parts = formatter.formatToParts(now);
    
    // 提取各部分
    const weekday = parts.find(part => part.type === 'weekday').value;
    const year = parts.find(part => part.type === 'year').value;
    const month = parts.find(part => part.type === 'month').value;
    const day = parts.find(part => part.type === 'day').value;
    const hour = parts.find(part => part.type === 'hour').value;
    const minute = parts.find(part => part.type === 'minute').value;
    const second = parts.find(part => part.type === 'second').value;
    
    // 组合成目标格式：星期, 月/日/年 时:分:秒
    d.value = `${ weekday }, ${ month }/${ day }/${ year } ${ hour }:${ minute }:${ second }`;
}

onMounted(() => {
    // 优化用户直接输入地址进入页面时 导航栏对应位置进行高亮
    get_active_nav_item();
    // 获取用户信息
    userService.getUserInfo();
    // 开启定时器计算日期
    updateDate();
});
</script>

<style scoped lang="less">
.nav {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: var(--nav-height);
    background-color: #fff;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.1);
    padding: 0 11vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;

    .left-box, .right-box {
        display: flex;
        align-items: center;
    }

    .left-box {
        gap: 2vw;

        .mobile-tab-btn {
            display: none;
        }

        .logo {
            --w: 7vw;
            --h: 2vw;
        }

        .tab-list {
            display: flex;
            align-items: center;
            gap: 0.7vw;

            .tab-item {
                display: flex;
                flex-direction: column;
                align-items: center;

                .under-line {
                    width: 80%;
                    background-color: var(--active-color);
                    border-radius: 0.2vw;
                    transition: all 0.3s ease-in-out;
                }
            }
        }
    }

    .right-box {
        height: 100%;
        gap: 1vw;

        .btn {
            padding: 0.6vw 1vw;
            font-size: 0.75vw;
            line-height: 0.8vw;
            border-radius: 0.3vw;
        }

        .user-box {
            display: flex;
            align-items: center;
            gap: 1vw;

            .login-btn {
                color: #fff;
                background-color: #2563eb;
    
                &:hover {
                    background-color: #1d4ed8;
                }
            }
    
            .register-btn {
                color: #333333;
                background-color: #fff;
    
                &:hover {
                    color: #2563eb;
                    background-color: #2563eb10;
                }
            }
        }

        .userinfo-box {
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover .more {
                display: block;
            }

            .user-account {
                font-size: 0.8vw;
            }

            .more {
                display: none;
                padding: 0.5vw;
                background-color: #fff;
                box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
                border-radius: 1vw;
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);

                &::after {
                    content: '';
                    display: block;
                    width: 0;
                    height: 0;
                    position: absolute;
                    left: 50%;
                    bottom: 100%;
                    transform: translateX(-50%);
                    border-top: 0.5vw solid #ffffff00;
                    border-left: 0.5vw solid #ffffff00;
                    border-right: 0.5vw solid #ffffff00;
                    border-bottom: 0.5vw solid #fff;
                }
                
                .list {
                    .item {
                        display: flex;
                        align-items: center;
                        gap: 0.5vw;
                        padding: 0.5vw 1vw;

                        &:hover .text {
                            color: var(--active-color);
                        }

                        .icon {
                            --size: 1vw;
                            width: var(--size);
                            height: var(--size);
                        }

                        .text {
                            font-size: 0.8vw;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }

        .language-box {
            .language-btn {
                color: #333333;
                background-color: #fff;
    
                &:hover {
                    color: #2563eb;
                    background-color: #2563eb10;
                }
            }
        }

        .date-box {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .date, .market-status {
                font-size: 0.8vw;
            }
            
            .market-status {
                font-weight: 500;
            }
        }

        // .logout-box {
        //     .logout-btn {
        //         color: #fff;
        //         background-color: var(--negative-number-color);
    
        //         &:hover {
        //             background-color: var(--negative-number-color);
        //         }
        //     }
        // }
    }
}

@media (max-aspect-ratio: 16/9) {
    .nav {
        padding: 0 5vw;

        .left-box {
            gap: 3vw;

            .logo {
                --w: 10vw;
                --h: 4vw;
            }

            .tab-list {
                gap: 2vw;
            }
        }

        .right-box {
            gap: 2vw;

            .btn {
                padding: 0.9vw 1.5vw;
                font-size: 1vw;
            }

            .userinfo-box {
                .user-account {
                    font-size: 1vw;
                }
            }

            .user-box {
                gap: 1.5vw;
            }
        }
    }
}

@media (max-aspect-ratio: 4/3) {
    .nav {
        padding: 0 3vw;

        .left-box .logo {
            --w: 12vw;
            --h: 5vw;
        }

        .right-box {
            gap: 3vw;

            .btn {
                padding: 1vw 1.7vw;
                font-size: 1.2vw;
            }

            .userinfo-box {
                .user-account {
                    font-size: 1.3vw;
                }
            }

            .user-box {
                gap: 1.5vw;
            }
        }
    }
}

@media (max-aspect-ratio: 1/1) {
    .nav {
        .left-box {
            .mobile-tab-btn {
                display: block;
                width: 3.5vw;
                height: 3.5vw;
                cursor: pointer;
            }

            .logo {
                --w: 15vw;
                --h: 6vw;
            }

            .tab-list {
                display: none;
            }
        }

        .right-box {
            .btn {
                padding: 1.5vw 2.5vw;
                font-size: 1.7vw;
                border-radius: 0.8vw;
            }

            .userinfo-box {
                .user-account {
                    font-size: 1.7vw;
                }
            }

            .user-box {
                gap: 2vw;
            }
        }
    }
}

@media (max-aspect-ratio: 3/4) {
    .nav {
        .left-box {
            .mobile-tab-btn {
                width: 4vw;
                height: 4vw;
            }

            .logo {
                --w: 26vw;
                --h: 8vw;
            }
        }

        .right-box {
            .btn {
                padding: 3vw;
                font-size: 3vw;
                border-radius: 1vw;
            }

            .userinfo-box {
                .user-account {
                    font-size: 2.2vw;
                }
            }

            .user-box {
                gap: 2vw;
            }
        }
    }
}

@media (max-aspect-ratio: 9/16) {
    .nav {
        .left-box {
            .mobile-tab-btn {
                width: 4.5vw;
                height: 4.5vw;
            }

            .logo {
                --w: 26vw;
                --h: 8vw;
            }
        }

        .right-box {
            .btn {
                padding: 3vw;
                font-size: 3.5vw;
                border-radius: 1vw;
            }

            .userinfo-box {
                .user-account {
                    font-size: 3.2vw;
                }
            }

            .user-box {
                gap: 2vw;
            }
        }
    }
}

</style>